<template>
    <div>
        <div class="header">
            <div class="header-left" @click="pageImpl.finish()">
                <image class="header-left-img" src="title_cha_img.png"></image>
            </div>
            <div class="header-center">
                <text class="header-center-text">{{headerTitle}}</text>
            </div>
            <div class="header-right" @click="pageImpl.saveData()">
                <text class="header-right-text">保存</text>
            </div>
        </div>
        <scroller>
            <div class="main-content">
                <div class="box-1line" v-if="! isoutcreate">
                    <div class="line">
                        <text class="line-text">来院方式:</text>
                        <div class="line-select">
                            <div :class="[paramAdd.comingWayCode == 3?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.comingWayCode = 3">
                                <text :class="[paramAdd.comingWayCode == 3?'text-selected':'text-normal']">自行来院</text>
                            </div>
                            <div :class="[paramAdd.comingWayCode == 4?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.comingWayCode = 4">
                                <text :class="[paramAdd.comingWayCode == 4?'text-selected':'text-normal']">院内发病</text>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box-2line">
                    <div class="box-2line-left">
                        <div class="line">
                            <text class="line-text">姓名:</text>
                            <input class="line-input" placeholder="无名氏" v-model="paramAdd.userName"></input>
                        </div>
                        <div class="line">
                            <text class="line-text">性别:</text>
                            <div class="line-select">
                                <div :class="[paramAdd.gender == 0?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.gender = 0">
                                    <text :class="[paramAdd.gender == 0?'text-selected':'text-normal']">男</text>
                                </div>
                                <div :class="[paramAdd.gender == 1?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.gender = 1">
                                    <text :class="[paramAdd.gender == 1?'text-selected':'text-normal']">女</text>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-2line-right">
                        <div class="box-2line-right-content" @click="pageImpl.getIDCardData()">
                            <image class="box-2line-right-img" src="idcard_img.png"></image>
                            <text class="box-2line-right-text">身份证识别</text>
                        </div>
                    </div>
                </div>
                <div class="box-1line">
                    <div class="line">
                        <text class="line-text">年龄:</text>
                        <input type="number" class="line-input" placeholder="0" maxlength="3" v-model="paramAdd.age"></input>
                    </div>
                    <div class="line">
                        <text class="line-text">身份证号:</text>
                        <input class="line-input" v-model="paramAdd.idcard"></input>
                    </div>
                </div>
                <div class="box-1line">
                    <div class="line">
                        <text class="line-text">电话:</text>
                        <input class="line-input" v-model="paramAdd.mobile"></input>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box-1line" v-if="isoutcreate">
                    <div class="line">
                        <text class="line-text">呼救:</text>
                        <div class="line-select">
                            <div :class="[paramAdd.isHelp == 1?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.isHelp = 1">
                                <text :class="[paramAdd.isHelp == 1?'text-selected':'text-normal']">是</text>
                            </div>
                            <div :class="[paramAdd.isHelp == 0?'line-select-btn-selected':'line-select-btn-normal']" @click="paramAdd.isHelp = 0">
                                <text :class="[paramAdd.isHelp == 0?'text-selected':'text-normal']">否</text>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box-1line" v-if="paramAdd.isHelp == 1 && isoutcreate">
                    <div class="line" @click = "helpCodeSelect = !helpCodeSelect">
                        <text class="line-text">呼救来源:</text>
                        <div class="line-input">
                            <text class="line-input-text">{{helpCodeName}}</text>
                            <image class="line-input-image" src="choose_img.png"></image>
                        </div>
                    </div>
                    <div class="line" @click="pageImpl.selectCallDateTime()">
                        <text class="line-text">呼救时间:</text>
                        <div class="line-input">
                            <text class="line-input-text">{{showcallTime}}</text>
                            <image class="line-input-image" src="choose_img.png"></image>
                        </div>
                    </div>
                </div>
                <div class="box-1line" v-if="paramAdd.isHelp == 1 && isoutcreate">
                    <div class="line">
                        <text class="line-text">呼救地址:</text>
                        <input class="line-input" @input="pageImpl.onInputHJAddress" v-model="paramAdd.address"></input>
                    </div>
                </div>
                <div class="box-1line-list" v-if="ishjaddressshow && isoutcreate">
                    <text class="line-text"></text>
                    <div class="line-input-list">
                        <div style="margin-left: 2px;margin-top: 2px;margin-bottom: 2px" v-for="item in listData" @click="pageImpl.setHJAddress(item)">
                            <text>{{item.name}}</text>
                        </div>
                    </div>
                </div>
                <div class="box-1line" v-if="paramAdd.isHelp == 1 && helpCodeSelect && isoutcreate">
                    <div class="line">
                        <text class="line-text"></text>
                        <div class="line-select-start">
                            <div :class="[paramAdd.helpCode == 1?'line-select-btn-start-selected':'line-select-btn-start-normal']" @click="pageImpl.setHelpCode(1,'本区域120')">
                                <text :class="[paramAdd.helpCode == 1?'text-selected':'text-normal']">本区域120</text>
                            </div>
                            <div :class="[paramAdd.helpCode == 2?'line-select-btn-start-selected':'line-select-btn-start-normal']" @click="pageImpl.setHelpCode(2,'区域外120')">
                                <text :class="[paramAdd.helpCode == 2?'text-selected':'text-normal']">区域外120</text>
                            </div>
                            <div :class="[paramAdd.helpCode == 3?'line-select-btn-start-selected':'line-select-btn-start-normal']" @click="pageImpl.setHelpCode(3,'当地医疗机构')">
                                <text :class="[paramAdd.helpCode == 3?'text-selected':'text-normal']">当地医疗机构</text>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-1line">
                    <div class="line" @click="pageImpl.seletctAttackTime()">
                        <text class="line-text">发病日期:</text>
                        <div class="line-input">
                            <text class="line-input-text">{{showattackTime}}</text>
                            <image class="line-input-image" src="choose_img.png"></image>
                        </div>
                    </div>
                    <div class="line">
                        <text class="line-text" v-if="isoutcreate && paramAdd.comingWayCode == 4">发病科室:</text>
                        <input class="line-input" v-model="paramAdd.attackDepartment" v-if="isoutcreate && paramAdd.comingWayCode == 4"></input>
                    </div>
                </div>
                <div class="box-1line">
                    <div class="line" @click="pageImpl.setNotSureMinute()">
                        <div style="width: 60px;flex-direction: row;justify-content: flex-end;padding-right: 5px">
                            <image style="width: 20px;height: 20px" src="select_img.png" v-if="surenotminute"></image>
                            <image style="width: 20px;height: 20px" src="not_select_img.png" v-if="! surenotminute"></image>
                        </div>
                        <div class="div-btn" :class="[surenotminute?'div-select':'div-normal']">
                            <text :class="[surenotminute?'text-selected':'text-normal']">发病时间无法精确到分钟?</text>
                        </div>
                    </div>
                    <div style="flex: 1;flex-direction: row;justify-content: flex-start;margin-top: 20px;margin-right:70px;align-items: center"
                         v-if="surenotminute" @click="attachTimeSelect = !attachTimeSelect">
                        <text style="width:60px;font-size: 12px;color: #666666">发病区间:</text>
                        <div style="flex: 1;flex-direction: row;justify-content:
                            flex-start;border-radius: 5px;border-style: solid;border-width: 0.5px;height: 25px;border-color: #b1b1b1;align-items: center">
                            <text style="flex: 1;font-size: 12px;color: #666666;padding-left: 5px">{{ATTACK_ZONE_TIME}}</text>
                            <image style="width: 9px;height: 16px;margin-right: 10px" src="choose_img.png"></image>
                        </div>
                    </div>
                </div>
                <div class="box-1line" v-if="surenotminute && attachTimeSelect">
                    <div class="line">
                        <text class="line-text"></text>
                        <div class="line-select-start">
                            <div :class="[ATTACK_ZONE_TIME == '凌晨(0点到6点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '凌晨(0点到6点)',paramAdd.attackZone='0点到6点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '凌晨(0点到6点)'?'text-selected':'text-normal']">凌晨(0点到6点)</text>
                            </div>
                            <div :class="[ATTACK_ZONE_TIME == '清晨(6到8点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '清晨(6到8点)',paramAdd.attackZone='6到8点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '清晨(6到8点)'?'text-selected':'text-normal']">清晨(6到8点)</text>
                            </div>
                            <div :class="[ATTACK_ZONE_TIME == '上午(8到12点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '上午(8到12点)',paramAdd.attackZone='8到12点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '上午(8到12点)'?'text-selected':'text-normal']">上午(8到12点)</text>
                            </div>
                            <div :class="[ATTACK_ZONE_TIME == '中午(12到14点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '中午(12到14点)',paramAdd.attackZone='12到14点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '中午(12到14点)'?'text-selected':'text-normal']">中午(12到14点)</text>
                            </div>
                            <div :class="[ATTACK_ZONE_TIME == '下午(14到17点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '下午(14到17点)',paramAdd.attackZone='14到17点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '下午(14到17点)'?'text-selected':'text-normal']">下午(14到17点)</text>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="box-1line" v-if="surenotminute && attachTimeSelect">
                    <div class="line">
                        <text class="line-text"></text>
                        <div class="line-select-start">
                            <div :class="[ATTACK_ZONE_TIME == '傍晚(17到19点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '傍晚(17到19点)',paramAdd.attackZone='17到19点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '傍晚(17到19点)'?'text-selected':'text-normal']">傍晚(17到19点)</text>
                            </div>
                            <div :class="[ATTACK_ZONE_TIME == '晚上(19到24点)'?'line-select-btn-start-selected':'line-select-btn-start-normal']"
                                 @click="ATTACK_ZONE_TIME = '晚上(19到24点)',paramAdd.attackZone='19到24点',attachTimeSelect= !attachTimeSelect">
                                <text :class="[ATTACK_ZONE_TIME == '晚上(19到24点)'?'text-selected':'text-normal']">晚上(19到24点)</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-1line">
                    <div class="line">
                        <text class="line-text">主诉:</text>
                        <input class="line-input" v-model="paramAdd.chiefComplaint"></input>
                    </div>
                </div>
                <div class="box-1line">
                    <div class="line">
                        <text class="line-text">发病地址:</text>
                        <input class="line-input" @input="pageImpl.onInputFBAddress" v-model="paramAdd.attackAddress"></input>
                    </div>
                </div>
                <div class="box-1line-list" v-if="isfbaddressshow">
                    <text class="line-text"></text>
                    <div class="line-input-list">
                        <div style="margin-left: 2px;margin-top: 2px;margin-bottom: 2px" v-for="item in listData" @click="pageImpl.setFBAddress(item)">
                            <text>{{item.name}}</text>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
    import EMNewCreateOutImpl from "./pageControl/EMNewCreateOutImpl";
    export default {
        data: function () {
            return {
                pageImpl: "",
                isoutcreate:true,
                headerTitle: "新建急救单",
                helpCodeName:"本区域120",
                showcallTime:"",
                ishjaddressshow:false,
                isfbaddressshow:false,
                issetaddressing:false,
                listData:[],
                showattackTime:"",
                surenotminute:false,
                helpCodeSelect:false,
                attachTimeSelect:true,
                ATTACK_ZONE_TIME:"",

                paramAdd:{
                    comingWayCode:"",
                    userName:"",
                    gender:0,
                    idcard:"",
                    age:"",
                    mobile:"",
                    isHelp:1,
                    helpCode:1,
                    callTime:"",
                    address: "", //呼叫地址
                    attackTime:"",
                    attackZone:"",
                    chiefComplaint:"",
                    attackAddress:"",
                    isNullAttackDetailTime:false,
                    attackDepartment:""
                }
            }
        },
        mounted: function () {
            let self = this;
            self.pageImpl = new EMNewCreateOutImpl(self);
        },
        methods:{
            recieveMessage: function (text) {

            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #f2f2f2;
    }

    .header-left {
        width: 100px;
        height: 40px;
        flex-direction: column;
        justify-content: center;
        /*background-color: #444444;*/
    }

    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }

    .header-center {
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .header-center-text {
        font-size: 13px;
        color: #666666;
    }

    .header-right {
        width: 80px;
        height: 25px;
        margin-right: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #4c7fd8;
        border-radius: 2px;
    }

    .header-right-text {
        font-size: 13px;
        color: #ffffff;
    }
    .main-content{
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 30px;
    }
    .box-2line {
        height: 90px;
        flex-direction: row;
    }

    .box-2line-left {
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
    }

    .box-2line-right {
        flex: 1;
    }

    .box-2line-right-content{
        flex: 1;
        height: 70px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
        border-radius: 5px;
        margin-right: 70px;
        margin-top: 20px;
    }

    .box-2line-right-img{
        width: 40px;
        height: 28px;
        margin-left: 10px;
    }
    .box-2line-right-text{
        font-size: 14px;
        color: #666666;
    }
    .box-1line{
        flex-direction: row;
    }
    .line {
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-right: 70px;
        margin-top: 20px;
    }

    .line-input {
        flex: 1;
        flex-direction: row;
        align-items: center;
        height: 25px;
        font-size: 12px;
        color: #666;
        border-radius: 5px;
        border-style: solid;
        border-color: #b1b1b1;
        border-width: 0.5px;
        padding-left: 5px;
    }

    .box-1line-list{
        /*position: absolute;*/
        flex-direction: row;
        margin-right: 70px;
        /*left: 0;*/
        /*right: 0;*/
    }

    .line-input-list{
        flex: 1;
        background-color: #ffffff;
        border-radius: 5px;
        border-style: solid;
        border-color: #b1b1b1;
        border-width: 0.5px;
    }

    .line-text{
        width: 60px;
        color: #666666;
        font-size: 12px;
    }
    .line-select{
        flex: 1;
        flex-direction: row;
        justify-content: space-between;
        height: 25px;
    }
    .line-select-start{
        flex: 1;
        flex-direction: row;
        justify-content:flex-start;
        height: 25px;
    }
    .line-select-btn-start-normal{
        justify-content: center;
        align-items: center;
        width: 100px;
        border-radius: 5px;
        background-color: #f2f2f2;
        margin-right: 10px;
    }
    .line-select-btn-start-selected{
        justify-content: center;
        align-items: center;
        width: 100px;
        border-radius: 5px;
        background-color: #4c7fd8;
        margin-right: 10px;
    }
    .line-select-btn-normal{
        justify-content: center;
        align-items: center;
        width: 100px;
        border-radius: 5px;
        background-color: #f2f2f2;
    }
    .line-select-btn-selected{
        justify-content: center;
        align-items: center;
        width: 100px;
        border-radius: 5px;
        background-color: #4c7fd8;
    }
    .line-input-image{
        width: 9px;
        height:16px;
        margin-right: 10px;
    }
    .line-input-text{
        flex: 1;
        color: #666666;
        font-size: 12px;
    }
    .text-normal{
        color: #666666;
        font-size: 12px;
    }
    .text-selected{
        color: #ffffff;
        font-size: 12px;
    }
    .div-btn{
        flex-direction: row;
        height: 25px;
        padding-left: 10px;
        padding-right: 10px;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }
    .div-normal{
        background-color: #f2f2f2;
    }
    .div-select{
        background-color: #4c7fd8;
    }
</style>